<template>
  <div class="page-home home-main" :style="{ height: mainH + 'px' }">
    <div class="inner">
      <template v-for="(navItem, navIndex) in homeNav">
        <h2 class="home-title" :key="navIndex">{{ navItem.title }}</h2>
        <ul class="home-nav">
          <template v-if="navItem.title == '户籍化管理'">
            <template v-for="(item, index) in navItem.children" v-if="item.visible">
              <li @click="openImplement" v-if="siteInfos.userType == 1 && item.title == '检查工作落实'" :key="index">
                <p class="icon">
                  <img :src="item.logo" :alt="item.subtitleName" />
                </p>
                <p>{{ item.subtitleName }}</p>
              </li>
              <li @click="open(item, '_self')" v-else>
                <p class="icon">
                  <img :src="item.logo" :alt="item.subtitleName" />
                </p>
                <p>{{ item.subtitleName }}</p>
              </li>
            </template>
          </template>
          <template v-else>
            <li v-for="(item, index) in navItem.children" :key="index" @click="open(item)" v-if="item.visible">
              <p class="icon">
                <img :src="item.logo" :alt="item.subtitleName" />
              </p>
              <p>{{ item.subtitleName }}</p>
            </li>
          </template>
        </ul>
      </template>
    </div>
    <div class="star"></div>
    <div class="star star1"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
    <el-dialog title="提示" :visible.sync="implememtModalVisible" width="400px" :close-on-click-modal="false"
      :close-on-press-escape="false" destroy-on-close>
      <p>
        监管单位用户，暂不提供检查任务落实功能，我们将在后续版本增加相关监管用户的“检查任务落实”等功能。
      </p>
      <p class="mt-10">请点击“确定”进行其它操作。</p>
      <p class="mt-20 text-center">
        <el-button type="primary" @click="implememtModalVisible = false">确定</el-button>
      </p>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import navPath from "@/assets/js/homeNav";
export default {
  name: "Home",
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      implememtModalVisible: false,
      websock: null,
      soundList: [],
      audio: null,
      isSoundPlaying: false,
      homeNav: [
        {
          title: "安全管理",
          childrenIds: [
            "001",
            "002",
            "003",
            "004",
            "005",
            "027",
            "028",
            "029",
            "030",
            "037",
            "038",
            "006",
          ],
          children: [],
        },
        {
          title: "安全态势",
          childrenIds: [
            "007",
            "008",
            "009",
            "010",
            "012",
            "014",
            "016",
            "015",
            "025",
            "023",
            "021",
            "022",
            "020",
            "026",
            "024",
            "011",
            "013",
            "032",
            "033",
            "036",
            "034",
            "018",
            "017",
            "019",
            // "039", 
          ],
          children: [],
        },
      ],
      // 020 智慧加油站
    };
  },
  watch: {},
  computed: {
    mainH() {
      return this.winH - 174;
    },
    ...mapState(["siteInfos"]),
  },
  methods: {
    open(item, target) {
      if (item.url == "/") return;
      // if (item.url == "/emergency") {
      //   this.$message.error("模块开发中");
      //   return;
      // }
      if (item.permissionsId == "034") {
        this.openFullLoading();
        this.$post("/systemsetup/systemsetup/accountContactCheck").then(
          (res) => {
            this.closeFullLoading();
            window.open(window.location.protocol + "//" + res.data);
          },
          (err) => {
            this.closeFullLoading();
            this.$message.error(err.msg || "系统错误");
          }
        );
        return;
      }
      if (item.permissionsId == "024" || item.permissionsId == "011") {
        this.$message.error("模块开发中");
        return;
      }
      let routeUrl = this.$router.resolve({
        path: item.url,
        query: item.query,
      });
      // window.open(routeUrl.href, target || item.target || "_blank")
      window.open(routeUrl.href, "_self");
    },
    openImplement() {
      this.implememtModalVisible = true;
    },
    getHomeNavList() {
      if (!this.siteInfos || !this.siteInfos.homeId) return;
      this.openFullLoading();
      this.$get("/systemsetup/systemsetup/getHomePageLayoutList", {
        homeId: this.siteInfos.homeId,
      }).then(
        (res) => {
          this.closeFullLoading();
          let navList = res.data;
          this.formatNav(navList);
        },
        (err) => {
          this.closeFullLoading();
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    formatNav(navList) {
      this.homeNav.forEach((item) => {
        item.childrenIds.forEach((idItem) => {
          let thisNav = navList.find((nitem) => {
            return nitem.permissionsId == idItem;
          });
          if (thisNav) {
            thisNav.visible = this.siteInfos.navBar.indexOf(idItem) >= 0;
            let path = navPath[idItem];
            if (!path.query) {
              path.query = {};
            }
            if (thisNav.headlineName) {
              path.query.title = thisNav.headlineName;
            }
            item.children.push({ ...thisNav, ...path });
          }
        });
      });
    },
  },
  created() {
    this.getHomeNavList();
  },
  activated() { },
  mounted() { },
};
</script>
